<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../day13/style.css">
    <!-- 
        BFC是什么？ 块级格式化上下文 独立喧染区域（空间）
        触发BFC
            1,overflow:hidden;
            2,float:的属性值不为none 
            3,display:inline-block;
            4,position的值为absolute或fixed

        BFC的实际应用
            1，用来解决高度塌陷的（最多）
            2，用来解决浮动发生的重叠(两栏自适应布局)(主要)
            3，用来的解决margin上下重叠

     -->
     <style>
         body,html{
             height:100%
         }
         .all{
             /* background:red; */
             width:100%;
             /* overflow: hidden; */
             /* float:left; */
             /* display: inline-block; */
             /* position: absolute; */
             height: 100%;
         }
         .left{
             width:300px; height:100%; background: yellow;
             float:left;
         }
         .right{
            height:100%; background: blue;
            overflow: hidden;
         }
     </style>
</head>
<body>
    <div class="all">
        <div class="left"></div>
        <div class="right">右边</div>
    </div>

    <!-- <div style="width:300px; height:300px; background:red; margin-bottom:50px;"></div>
   <div style="overflow: hidden;">
    <div style="width:300px; height:300px; background:blue; margin-top: 80px;"></div></div> -->
</body>
</html>